<template>
  <div class="pop-up">
    <div class="approved-logging-container">
      <div class="title">
        <span>审核记录</span>
        <i class="el-icon-close" @click="closePopUp" />
      </div>
      <div class="table-container">
        <div class="order-number">
          预选单号：<span v-text="orderBatch">20191029144030932-3333 </span>
        </div>
        <div class="table-content">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="审批状态" :formatter="visibleFormat" width="100" />
            <el-table-column label="审核人" :formatter="formatRemark" width="140" />
            <el-table-column prop="context" label="审批意见" />
            <el-table-column prop="createTime" label="审批时间" width="190" />
            <el-table-column prop="operation" label="操作" width="100">
              <template slot-scope="scope">
                <div class="check-order" @click="toCheck(scope.row.id)">查看清单</div>
                <!-- <div class="check-order" @click="$router.push('/check-budget-orders?id='+scope.row.id)">查看清单</div> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->

        <el-pagination
          background
          :current-page.sync="pageParams.index"
          layout="prev, pager, next"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageParams.size"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div class="btn-container" style="font-size:16px;">
        <div class="btn-consel" @click="closePopUp">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { listApprove } from '@/api/pre-order/pre-order-for-me'
export default {
  props: {
    orderBatch: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pageParams: {
        index: 1,
        size: 5
      },
      tableData: [],
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取审批记录列表
    getList() {
      listApprove(this.pageParams, this.orderBatch).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    // 显示状态
    visibleFormat(row) {
      if (row.status) {
        return '同意'
      } else {
        return '不同意'
      }
    },
    // 格式化账户备注
    formatRemark(item) {
      if (item.remark) {
        return item.remark + '(' + item.approveName + ')'
      } else {
        return item.approveName
      }
    },
    closePopUp() {
      this.$emit('closePopUp')
    },
    toCheck(id) {
      // 带参跳转到详情页
      document.body.style.overflow = 'auto'
      this.$router.push({ path: '/check-budget-orders', query: { id: id, orderBatch: this.orderBatch }})
    },
    // 页个数数改变的时候可获取当前显示个数
    handleSizeChange(size) {
      this.pageParams.size = size
      // this.loadPost();个数改变的时候再次调用请求
    },
    // 页数改变的时候可获取当前显示当前页码数
    handleCurrentChange(currentPage) {
      this.pageParams.index = currentPage
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .el-icon-success{
    color: #ff3b30;
    font-size: 15px;
  }
  ::v-deep .el-icon-circle-check{
    font-size: 15px;
  }
  .el-pagination{
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    background-color: #fff;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #fff;
    color: #FF3B30FF;
    border: 1px solid #FF3B30FF;
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled){
    // background-color: #fff;
    border: 1px solid #DDDDDDFF;
  }
  ::v-deep .el-pagination.is-background .btn-prev{
    border: 1px solid #DDDDDDFF;
    padding: 0 15px;
  }
  ::v-deep .el-icon-arrow-left:before {
    content: "上一页";
  }
  ::v-deep .el-pagination.is-background .btn-next{
    border: 1px solid #DDDDDDFF;
    padding: 0 15px;
  }
  ::v-deep .el-icon-arrow-right:before {
    content: "下一页";
  }
::v-deep .el-table--enable-row-transition .el-table__body td {
  text-align: center;
  color: #6b6b6bff;
  font-size: 12px;
}
::v-deep .el-table th.is-leaf {
  text-align: center !important;
  background-color: #f5f5f5 !important;
  font-weight: normal;
  color: #6b6b6bff;
}

.el-button {
  color: #606266;
  font-size: 14px;
  background-color: #fff;
  border: none;
  outline: none;
}
.pop-up {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .approved-logging-container {
    width: 720px;
    font-size: 16px;
      background-color: #fff;
    .title {
      padding: 0 15px;
      height: 42px;
      background-color: #f5f5f5ff;
      border-bottom: 1px solid #e5e5e5ff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-icon-close:hover {
        cursor: pointer;
      }
    }
    .table-container {
      background-color: #fff;
      padding: 0 15px;
      display: flex;
      flex-direction: column;
      .order-number {
        padding-top: 57px;
        padding-bottom: 27px;
      }
      .table-content {
        margin-bottom: 20px;
        border: 1px solid #e5e5e5ff;
        border-bottom: none;
        font-size: 12px;
        .check-order {
          color: #02a9f1ff;
        }
        .check-order:hover {
          cursor: pointer;
        }
      }
    }
    .btn-container{
      background-color: #fff;
  .btn-consel {
      width: 110px;
      height: 37px;
      border-radius: 4px;
      background-color: #e7e7e7ff;
      color: #6b6b6bff;
      line-height: 37px;
      text-align: center;
      margin-left: 286px;
        margin-bottom: 94px;
    }
    .btn-consel:hover {
      cursor: pointer;
    }
    }

  }
}
</style>
